<template>
  <div class="common-layout">
    <el-row :gutter="8">

      <!-- 左侧布局 -->
      <el-col :span="14">
        <!-- <div>container 1-1</div> -->
        <el-row :gutter="8">
          <el-col :span="9">
            <el-container class="flex with-border headToolbar" direction="horizontal">
              <el-text class="mx-1">卫星星座：</el-text>
              <el-space :size="7">
                <el-button>初始化</el-button>
                <el-button>新增</el-button>
                <el-button>清除</el-button>
              </el-space>
            </el-container>
          </el-col>
          <el-col :span="6">
            <el-container class="flex with-border headToolbar" direction="horizontal">
              <el-text class="mx-1">遥测数据：</el-text>
              <el-switch v-model="value5" class="ml-2" inline-prompt
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="接入"
                inactive-text="断开" />
            </el-container>
          </el-col>
          <el-col :span="9">
            <el-container class="with-border headToolbar" direction="vertical">
              <el-text class="mx-1" size="small">起始时间：yyyy-MM-dd HH:mm:ss</el-text>
              <el-text class="mx-1" size="small">当前时间：yyyy-MM-dd HH:mm:ss</el-text>
            </el-container>
          </el-col>
        </el-row>
        <div class="with-border">
          <el-row :gutter="10">
            <el-col :span="12">
              <div class="flex with-border" style="height: 350px;">
                3D
                大地球
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex with-border" style="height: 350px;">
                2D
                大地球
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="15">
              <div class="flex with-border" style="height: 200px;">
                这是个折线图/柱状图/饼图
                显示当前星座轨道数、每轨卫星数、地面站数
              </div>
            </el-col>
            <el-col :span="9">
              <div class="flex with-border" style="height: 200px;">
                <el-container direction="vertical">
                  这里是信息显示
                  <el-row>地面站坐标: 东经xxx° 北纬xxx°</el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-table :data="tableData" height="130" size="small" table-layout="fixed">
                        <!-- <el-table-column prop="code" label="卫星代号"/> -->
                        <el-table-column prop="name" label="阴影区卫星"/>
                      </el-table>
                    </el-col>
                    <el-col :span="12">
                      <el-table :data="tableData" height="130" size="small" table-layout="fixed">
                        <!-- <el-table-column prop="code" label="卫星代号"/> -->
                        <el-table-column prop="name" label="阴影区卫星"/>
                      </el-table>
                    </el-col>
                  </el-row>
                </el-container>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>

      <!-- 右侧布局 -->
      <el-col :span="10">
        <!-- <div>container 1-2</div> -->
        <el-row :gutter="6">
          <el-col :span="6">
            <el-container class="with-border headToolbar">
              <el-text class="mx-1">预处理：</el-text>
              <el-switch v-model="value5" class="ml-2" inline-prompt
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="开启"
                inactive-text="关闭" />
            </el-container>
          </el-col>
          <el-col :span="9">
            <el-container class="with-border headToolbar">
              <el-text class="mx-1">卫星编号：</el-text>
              <el-select v-model="value" placeholder="Select" size="large" style="width: 100px">
                <el-option v-for="item in Satellites" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-container>
          </el-col>
          <el-col :span="9">
            <el-container class="with-border headToolbar">
              <el-text class="mx-1">时序数据：</el-text>
              <el-select v-model="value" placeholder="Select" size="large" style="width: 100px">
                <el-option v-for="item in TMs" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-container>
          </el-col>
        </el-row>
        <div class="with-border">
          <el-row>
            <el-col :span="24" class="flex" style="height: 275px;">
              <!-- 这是个时序数据动态折线图
              原始遥测数据 -->
              <LineChart id="LineChart_Original" height="100%" width="100%" title="原始遥测数据"
                class="bg-[var(--el-bg-color-overlay)]" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" class="flex" style="height: 275px;">
              <!-- 这是个时序数据动态折线图
              经过预处理的数据
              初始化未使能时显示为NA -->
              <LineChart id="LineChart_Preprocess" height="100%" width="100%" title="预处理遥测数据"
                class="bg-[var(--el-bg-color-overlay)]" />
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// import { useRoute } from 'vue-router'
// import { useStore } from 'vuex'
// import { ElMessage } from 'element-plus'
// import { useI18n } from 'vue-i18n'
import LineChart from '@/views/dashboard/components/LineChart.vue'
const value5 = ref(true)

const value = ref('')

const Satellites = [
  {
    value: '卫星1',
    label: '卫星1',
  },
  {
    value: '卫星2',
    label: '卫星2',
  },
]

const TMs = [
  {
    value: 'TM1',
    label: 'TM1',
  },
  {
    value: 'TM2',
    label: 'TM2',
  },
]

const tableData = [
  {
    code: 'Code',
    name: 'Sat Name',
  },
  {
    code: 'Code',
    name: 'Sat Name',
  },
  {
    code: 'Code',
    name: 'Sat Name',
  },
  {
    code: 'Code',
    name: 'Sat Name',
  },
  {
    code: 'Code',
    name: 'Sat Name',
  },
  {
    code: 'Code',
    name: 'Sat Name',
  },
  {
    code: 'Code',
    name: 'Sat Name',
  },
  {
    code: 'Code',
    name: 'Sat Name',
  }
]

onMounted(() => {

  // 大小自适应
  window.addEventListener("resize", () => {
    chart.value.resize();
  });
});
</script>

<style scoped lang="scss">
.with-border {
  width: 100%;
  border: 1px solid #ccc;
  padding: 6px;
  border-radius: 16px;
  justify-content: space-around;
}

.headToolbar {
  height: 50px;
  align-items: center;
}

.el-row {
  margin-bottom: 6px;
  width: 100%;
}

.el-row:last-child {
  margin-bottom: 0;
}
</style>
